import { ref, Ref, onMounted, onUnmounted } from 'vue'

const useClickOutside = (DropDownRef: Ref<null | HTMLElement>) => {
  const isClickOutsize = ref(false)
  const handler = (e: MouseEvent) => {
    if (DropDownRef.value) {
      if (
        !DropDownRef.value.contains(e.target as HTMLElement)
      ) {
        isClickOutsize.value = true
      } else {
        isClickOutsize.value = false
      }
    }
    console.log(isClickOutsize.value, 'isClickOutsize')
  }
  onMounted(() => {
    document.addEventListener('click', handler)
  })
  onUnmounted(() => {
    document.removeEventListener('click', handler)
  })
  return isClickOutsize
}

export default useClickOutside
